<template>
  <div>
    <h1>热点资讯网</h1>
    <el-table :data="pageData.list" :row-class-name="tableRowClassName">
      <el-table-column prop="id" label="序号" width="180"> </el-table-column>
      <el-table-column label="标题" width="180">
        <template slot-scope="scope">
          <a href="#" @click="getReplies(scope.row.id, scope.row.viewCount)">{{
            scope.row.title
          }}</a>
        </template>
      </el-table-column>
      <el-table-column label="回复/查看">
        <template slot-scope="scope">
          <span>{{ scope.row.replyCount }}</span>
          /
          <span>{{ scope.row.viewCount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="reportTime" label="发表时间"> </el-table-column>
      <el-table-column prop="lastMdTime" label="最后修改"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <b @click="handleDelete(scope.$index, scope.row)">删除</b>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt-10"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageData.pageNo"
      :page-size="pageData.pageSize"
      layout="prev, pager, next, jumper,total"
      :total="pageData.totalCount"
    >
    </el-pagination>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      pageData: {
        list: [],
        pageNo: 1,
        pageSize: 3,
        totalCount: 0,
        totalPageCount: 1,
      },
      searchForm: {
        pageSize: 3,
        pageNo: 1,
      },
    };
  },
  mounted() {
    this.doSearch();
  },
  methods: {
    getReplies(id, viewCount) {
      this.$axios
        .post("/hotSpotConsultation/update", {
          viewCount: viewCount + 1,
          id: id,
        })
        .then((response) => {
          if (response.data.code == 0) {
            this.doSearch();
          }
        });
      this.$router.push({
        path: "/Replies",
        query: { id: id },
      });
    },
    doSearch() {
      let bodyData = qs.stringify(this.searchForm);
      this.$axios
        .post("/hotSpotConsultation/page", bodyData)
        .then((response) => {
          if (response.data.code == 0) {
            this.pageData = response.data.data;
          }
        });
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("/hotSpotConsultation/delete?id=" + row.id)
            .then((response) => {
              if (response.data.code == 0) {
                this.$message.success("删除成功");
                this.doSearch();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(pageSize) {
      this.searchForm.pageSize = pageSize;
      this.doSearch();
    },
    handleCurrentChange(pageNo) {
      this.searchForm.pageNo = pageNo;
      this.doSearch();
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 != 0) {
        return "success-row";
      }
    },
  },
};
</script>

<style>
.el-table .success-row {
  background: #9ade9a;
}
</style>